<template>
  <div v-loading="isLoading" class="tab-title-page">
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="search_total">
        <div class="flex data_grid">
          <p class="flex-1"><span class="color-999">拿货价(仅已设置订单)（元）</span><br><span>{{ form.truePrice }}</span></p>
          <p class="flex-1"><span class="color-999">总租金（元）</span><br><span>{{ form.rent_total }}</span></p>
          <p class="flex-1"><span class="color-999">已收租金（元）</span><br><span>{{ form.paid_rent }}</span></p>
          <p class="flex-1"><span class="color-999">待收租金（元）</span><br><span>{{ form.uNpaid_rent }}</span></p>
        </div>
        <div class="flex data_grid">
          <p class="flex-1"><span class="color-999">总买断款（元）</span><br><span>{{ form.setmeal_price }}</span></p>
          <p class="flex-1"><span class="color-999">已付买断款（元）</span><br><span>{{ form.buy_out }}</span></p>
          <p class="flex-1"><span class="color-999">待付买断款（元）</span><br><span>{{ form.setmeal_price - form.buy_out }}</span></p>
          <p class="flex-1"><span class="color-999">保费总额（元）</span><br><span>{{ form.withhold }}</span></p>
        </div>
        <div class="flex data_grid">
          <p class="flex-1"><span class="color-999">逾期金额（元）</span><br><span>{{ form.overdue_amount }}</span></p>
          <!-- <p class="flex-1" style="border-left: 0px solid #eeeeee;" />
          <p class="flex-1" style="border-left: 0px solid #eeeeee;" />
          <p class="flex-1" style="border-left: 0px solid #eeeeee;" /> -->
        </div>
        <!-- <p class="color-999 text-center">查询时间：{{ searchForm.createTime?searchForm.createTime:'全部' }}</p> -->
      </div>
    </div>
    <!-- <fee-dialog
      ref="feeDialog"
      :view-item="viewItem"
    /> -->
  </div>
</template>

<script>
// import customPage from '@/components/customPage'
// import myDatePicker from '@/components/myDatePicker'
// import { reconciliationFlow, reconciliationExport } from '@/api/finance'
import { getOrderStatisticInfo } from '@/api/order'
// import feeDialog from './feeDialog'
export default {
  // components: { customPage, myDatePicker, feeDialog },
  data() {
    return {
      form: {
        truePrice: 0, // 拿货价
        rent_total: 0, // 总租金
        paid_rent: 0, // 已付租金
        uNpaid_rent:0,  //待收租金
        overdue_amount: 0, // 逾期
        setmeal_price: 0, // 总买断价
        buy_out: 0, // 已买断的支付款
        withhold: 0// 保费
      },
      isLoading: false
      // searchForm: {
      //   orderNo: '',
      //   moneyFlow: '',
      //   flowType: '',
      //   createTime: ''
      // },
      // typeList: [
      //   { id: 1, label: '结算' },
      //   { id: 2, label: '退款' },
      //   { id: 3, label: '充值' },
      //   { id: 4, label: '买断结算' },
      //   { id: 6, label: '提现' },
      //   { id: 7, label: '增值服务业务充值' }
      // ],
      // tableData: [],
      // total: 0,
      // amount: 0,
      // service_fee: 0,
      // withdrawal: 0,
      // charge: 0,
      // viewItem: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // openFeeDialog(item) {
    //   if (item.service_fee > 0) {
    //     this.viewItem = item
    //     this.$refs.feeDialog.dialogVisible = true
    //   }
    // },
    // goToOrder(orderId) {
    //   if (orderId) {
    //     this.$router.push({ name: 'orderList', params: { orderId }})
    //   }
    // },
    // getTypeName(id) {
    //   const obj = this.typeList.find(k => k.id == id)
    //   return obj ? obj.label : ''
    // },
    // 获取数据
    getData() {
      getOrderStatisticInfo().then(res => {
        this.form.rent_total = res.rent_total;
        this.form.paid_rent = res.Rented
        this.form.overdue_amount = res.overRent
        this.form.uNpaid_rent = res.dueRent
        this.form.truePrice=res.truePrice
        this.form.setmeal_price = 0
        this.form.buy_out = 0
        this.form.withhold = 0

        this.isLoading = false
        // // 格式化品类费率
        // const goodsRateObj = {}
        // res.goodsRate.forEach(res1 => {
        //   goodsRateObj[res1.category_id] = res1
        // })
        // // 格式化品类
        // let categoryObj = {}
        // res.category.forEach(res1=>{
        //   categoryObj[res1.category_id] = res1
        // })
        // order.forEach(element => {
        //   //总租金
        //   this.form.rent_total += Number(element.rent_total) * 100 - Number(element.rent_total) * 100 * 0.08
        //
        //   // 计算拿货价
        //   if (element.device_true_price) {
        //     const tp = element.device_true_price.split(',')
        //     tp.forEach((tpitem) => {
        //       this.form.truePrice += Number(tpitem)
        //     })
        //   }
        //   //已收租金
        //   element.trans.forEach(trans => {
        //     // this.form.paid_rent += Number(lease.paid_rent) * 100
        //     this.form.paid_rent += Number(trans.amount) * 100
        //   })
        //
        //   //待收租金
        //   element.dueAmount.forEach(dueAmount => {
        //     // this.form.paid_rent += Number(lease.paid_rent) * 100
        //     this.form.uNpaid_rent += Number(dueAmount.rent) * 100 - Number(dueAmount.rent) * 100 * 0.08
        //   })
        //
        //   //逾期金额
        //   if (Number(element.status) == 39) {
        //     // this.form.rent_total += Number(element.rent_total) * 100
        //     element.lease.forEach(lease => {
        //       // this.form.paid_rent += Number(lease.paid_rent) * 100
        //       this.form.overdue_amount += Number(lease.rent) * 100 - Number(lease.rent) * 100 * 0.08
        //     })
        //   }
        //
        //
        //   // 计算买断 判断是否可以买断，状态是否是租用中
        //   if (element.is_buy_out == 1 && (element.status == 30 || element.status == 62 || element.status == 56 || element.status == 57)) {
        //     this.form.setmeal_price += Number(element.setmeal_price) * 100
        //     // 计算已支付买断款
        //     if (element.status == 62) {
        //       this.form.buy_out += Number(element.setmeal_price) * 100
        //     }
        //   }
        //   // 计算保费
        //   if (Number(element.getPolicy) == 0) {
        //     this.form.withhold += Number(element.rent_total) * 0.016
        //     // if (element.trans && element.trans.amount) {
        //     //   this.form.withhold -= element.trans.amount
        //     // }
        //   }
        // })


      })
    }
    // getList() {
    //   // flag为true, 则不刷新表格
    //   const { page, pageSize } = this.$refs.customPage
    //   reconciliationFlow({
    //     page,
    //     pageSize,
    //     ...this.searchForm
    //   }).then(res => {
    //     const { list: { data, total }, count: { amount, service_fee, withdrawal, charge }} = res
    //     this.tableData = data || []
    //     this.total = total || 0
    //     this.amount = parseFloat(amount) ? parseFloat(amount).toFixed(2) : '0.00'
    //     this.service_fee = parseFloat(service_fee) ? parseFloat(service_fee).toFixed(2) : '0.00'
    //     this.withdrawal = parseFloat(withdrawal).toFixed(2) || 0
    //     this.charge = parseFloat(charge).toFixed(2) || 0
    //   })
    // },
    // // 查询
    // search() {
    //   const pickerVal = this.$refs.myDatePicker.getVal()
    //   if (pickerVal !== 'error') {
    //     this.searchForm.createTime = pickerVal
    //     this.$refs.customPage.page = 1
    //     this.getList()
    //   }
    // },
    // // 重置
    // reset() {
    //   if (this.$refs.myDatePicker) {
    //     this.$refs.myDatePicker.reset()
    //   }
    //   this.searchForm = {
    //     orderNo: '',
    //     moneyFlow: '',
    //     flowType: '',
    //     createTime: ''
    //   }
    //   this.getList()
    // },
    // // 导出
    // exportFile() {
    //   const pickerVal = this.$refs.myDatePicker.getVal()
    //   if (pickerVal !== 'error') {
    //     this.searchForm.createTime = pickerVal
    //     reconciliationExport(this.searchForm)
    //   }
    // }
  }
}
</script>
<style lang="scss" scoped>
.search_total {
  padding: 0 30px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
  p,
  span {
    line-height: 23px;
  }
  & > p {
    padding: 10px 0;
  }
}
.data_grid {
  border-bottom: 1px solid #eeeeee;
  p {
    padding: 20px 0;
    text-align: center;
    &:not(:first-child) {
      border-left: 1px solid #eeeeee;
    }
    span:last-child {
      font-size: 30px;
      line-height: 40px;
    }
  }
}
.underline_text {
  text-decoration: underline;
}
.common_form_search {
  padding: 15px 15px 0 15px;
  border-radius: 0 0 10px 10px;
  background-color: #ffffff;
}
.child_page {
  padding: 15px;
}
</style>
